<template>
  <div>
    <el-row >
      <el-col class="margin20">
         <el-row :gutter="24" class="mgb20 firstHeight" v-if="rolesId == 5 || rolesId == 6">
           <el-col :span="8">
             <el-card shadow="hover" class="mgb20" style="height: 92px">
          <div class="user-info1">
            <img src="../../assets/img/xiongmao.jpg" alt v-if="rolesId == 5" />
            <img src="../../assets/img/xiongmao.jpg" alt v-if="rolesId == 6" />
            <div class="user-info-cont">
              <div class="user-info-name" v-if="rolesId == 5 || rolesId == 6">
                {{ nickName }}
              </div>
            </div>
          </div>
        </el-card>
           </el-col>
         
          <el-col class="margin20" :span="6">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-1">
                <i class="el-icon-coin grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ todayBalance }}</div>
                  <div>今日总实收金额</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col class="margin20" :span="6">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-2">
                <i class="el-icon-data-analysis grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ todayTotal }}</div>
                  <div>今日总交易笔数</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col class="margin20" :span="6">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-3">
               <i class="el-icon-goods grid-con-icon"></i>
                  <div class="grid-cont-right">
                  <div class="grid-num">{{ todayFee }}</div>
                  <div>总手续费</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <!-- <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-1">
                <i class="el-icon-coin grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ wxTotal }}%</div>
                  <div>微信</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-2">
                <i class="el-icon-data-analysis grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ aliTotal }}%</div>
                  <div>支付宝</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-3">
                <i class="el-icon-goods grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ uniTotal }}%</div>
                  <div>云闪付</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-1">
                <i class="el-icon-coin grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ bankTotal }}%</div>
                  <div>银行卡</div>
                </div>
              </div>
            </el-card>
          </el-col> -->
        </el-row>


        <el-row :gutter="20" class="mgb20" v-if="  rolesId == 1 ||  rolesId == 2 || rolesId == 3 || rolesId == 4 ||  rolesId == 8 ">
          <el-col :span="10">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-1">
                <i class="el-icon-coin grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ todayBalance }}</div>
                  <div>今日总实收金额</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="10">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-2">
                <i class="el-icon-data-analysis grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ todayTotal }}</div>
                  <div>今日总交易笔数</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="10">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-3">
                <i class="el-icon-goods grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ todayProfit }}</div>
                  <div>今日分润（具体以对帐单为准）</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="10">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-1">
                <i class="el-icon-coin grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ total }}</div>
                  <div>总商户数</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="10">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-2">
                 <i class="el-icon-data-analysis grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ newtotal }}</div>
                  <div>今日新增商户数</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="10">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-3">
                <i class="el-icon-goods grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ activeCount }}</div>
                  <div>动销商户数</div>
                </div>
              </div>
            </el-card>
          </el-col>
       


        </el-row>
        
      </el-col>
    </el-row>
    
    <el-row :gutter="20">
      <el-col :span=" rolesId ==  5 || rolesId == 6 ? 8 : 0">
        <el-card
          shadow="hover"
          style="height: 403px"
          v-if="rolesId == 5 || rolesId == 6"
        >
          <div slot="header" class="clearfix">
            <span>支付方式</span>
          </div>
          微信
          <el-progress
            :percentage="wxTotal"
            color="#42b983"
            :width="120"
            style="line-height:3"
          ></el-progress>
          支付宝
          <el-progress style="line-height:3" :percentage="aliTotal"></el-progress>
          云闪付
          <el-progress style="line-height:3" :percentage="uniTotal"></el-progress>
          银行卡
          <el-progress style="line-height:3" :percentage="bankTotal" color="#f1e05a"></el-progress>
        
        </el-card>
        <!-- <el-card
          shadow="hover"
          style="height: 190px"
          v-if="
            rolesId == 1 ||
            rolesId == 2 ||
            rolesId == 3 ||
            rolesId == 4 ||
            rolesId == 8
          "
        >
          <div class="paimbox">
            <span class="span1">总商户数：</span>
            <span class="span2">{{ total }} 家</span>
          </div>
          <div class="paimbox">
            <span class="span1">今日新增商户数：</span>
            <span class="span2">{{ newtotal }} 家</span>
          </div>
          <div class="paimbox">
            <span class="span1">动销商户数：</span>
            <span class="span3">{{ activeCount }} 家</span>
          </div>
        </el-card> -->
      </el-col>


      <el-col :span="rolesId == 5 ||rolesId == 6 ? 16 : 24">
        <div class="table-charts" v-if=" rolesId == 1 || rolesId == 2 || rolesId == 3 || rolesId == 4 ||rolesId == 8 ">
          <el-card
          shadow="hover"
          style="height: 403px"
        >
          <div slot="header" class="clearfix">
            <span>今日商户交易排行</span>
          </div>
          <div class="merCard">
            <el-table
            ref="multipleTable"
            :data="todoList"
            tooltip-effect="dark"
            :height="300"
            style="width: 50%; overflow: auto;"
          >
            <el-table-column
              type="index"
              align="center"
              width="50"
              label="排行"
            ></el-table-column>
            <el-table-column align="center" label="商户名">
              <template slot-scope="scope">
                <div
                  class="todo-item"
                  :class="{ 'todo-item-del': scope.row.status }"
                >
                  {{ scope.row.merchantShortName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column width="120" align="center" label="总实收金额">
              <template slot-scope="scope">
                <span style="color: #fc6fa1"> {{ scope.row.balance }} </span>
                <span> 元 </span>
            
              </template>
            </el-table-column>
         
            <el-table-column align="center" width="110" label="交易总笔数">
              <template slot-scope="scope">
                <span style="color: #64d572"> {{ scope.row.total }} </span>
                <span> 笔 </span>
              </template>
            </el-table-column>
          </el-table>
          </div>
        </el-card>
        <el-card
          shadow="hover"
          style="height: 403px"
        >
        <div id="merUp" style="width: 100%; height:22rem"></div>
      </el-card>
        </div>
        <el-card shadow="hover" style="height: 403px" v-if="rolesId == 5">
          <div slot="header" class="clearfix">
            <span>今日门店交易排行</span>
          </div>
          <el-table
            ref="multipleTable"
            :data="todoList1"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              align="center"
              width="50"
              label="排行"
            ></el-table-column>
            <el-table-column align="center" label="门店名">
              <template slot-scope="scope">
                <div
                  class="todo-item"
                  :class="{ 'todo-item-del': scope.row.status }"
                >
                  {{ scope.row.shopName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column width="150" align="center" label="总实收金额">
              <template slot-scope="scope">
                <span style="color: #fc6fa1"> {{ scope.row.totalFee}} </span>
                <span> 元 </span>
          
              </template>
            </el-table-column>
            <el-table-column align="center" label="交易总笔数">
              <template slot-scope="scope">
                <span style="color: #64d572"> {{ scope.row.total }} </span>
                <span> 笔 </span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card shadow="hover" style="height: 403px" v-if="rolesId == 6">
          <div slot="header" class="clearfix">
            <span>终端分类及个数</span>
          </div>
          <el-table
            ref="multipleTable"
            :data="todoList2"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column align="center" label="终端类型">
              <template slot-scope="scope">
                <div
                  class="todo-item"
                  :class="{ 'todo-item-del': scope.row.status }"
                >
                  {{ scope.row.typeName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="数量">
              <template slot-scope="scope">
                <span style="color: #fc6fa1"> {{ scope.row.total }} </span>
                <span> 个 </span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="hover">
          <div id="money" class="money-charts" v-if="
              rolesId == 1 ||
              rolesId == 2 ||
              rolesId == 3 ||
              rolesId == 4 ||
              rolesId == 8 ||
              rolesId == 5 ||
              rolesId == 6
            "></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <div id="total" class="money-charts"></div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 修改登录密码 -->
    <el-dialog
      v-dialogDrag
      title="修改登录密码"
      :visible.sync="visible"
      width="30%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-form
        :model="ruleForm2"
        status-icon
        :rules="rules2"
        ref="ruleForm2"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="请输入原密码" prop="oldpass">
          <el-input
            type="password"
            v-model="ruleForm2.oldpass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="请输入新密码" prop="pass">
          <el-input
            type="password"
            v-model="ruleForm2.pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm2.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <div class="tip">*当前是默认密码，为确保账号安全请及时修改密码</div>
     
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm2')">重置</el-button>
        <el-button type="primary" @click="submitForm('ruleForm2')"
          >确定修改</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Schart from "vue-schart";
import * as echarts from 'echarts';
import bus from "../common/bus";
import md5 from "js-md5";
import {
  modifypassword,
  getLastWeekStatisticChart,
  getMerStatisticRank,
  getCountsByPayType,
  getMerCountInfo,
  getShopStatisticRank,
  getStatisticByRole,
  getShopTerminals,
} from "@/api/api";
export default {
  name: "dashboard",
  data() {
    let oldpass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      }
      callback();
    };
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm2.checkPass !== "") {
          this.$refs.ruleForm2.validateField("checkPass");
        }
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm2.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm2: {
        pass: "",
        checkPass: "",
        oldpass: "",
      },
      rules2: {
        oldpass: [{ validator: oldpass, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
      tagsList: [],
      rolesId: "",
      username: "", //商户号
      nickName: "",
      name: "",
      visible: false,
      nowTime: "",
      wxTotal: 0,
      aliTotal: 0,
      uniTotal: 0,
      bankTotal: 0,
      activeCount: 0,
      todayTotalFee: 0, //今日总交易额
      todayBalance: 0,      
      todayTotal: 0, //今日总交易笔数
      todayProfit: 0, //今日分润
      todayFee: 0,
      total: 0,
      newtotal: 0,
      todoList: [],
      todoList1: [], //门店交易排行数据
      todoList2: [], //门店下终端
      data: [
        {
          name: "",
          value: 0,
        },
      ],
      data1: [
        {
          name: "",
          value: 0,
        },
      ],
      data3: [
        {
          name: "",
          value: 0,
        },
      ],
      dateArr: [],
      moneyArr: [],
      totalArr: [],
      merUpArr: [],
      merDateArr: [],
      options: {
        title: "近七天每天的新增商户量",
        showValue: false,
        fillColor: "rgb(45, 140, 240)",
        bottomPadding: 20,
        topPadding: 30,
      },
      options2: {
        title: "近七天交易总金额趋势",
        fillColor: "#FC6FA1",
        axisColor: "#008ACD",
        contentColor: "#EEEEEE",
        bgColor: "#F5F8FD",
        bottomPadding: 30,
        leftPadding: 80,
        topPadding: 30,
      },
      options3: {
        title: "近七天交易总笔数趋势",
        fillColor: "rgb(45, 140, 240)",
        bottomPadding: 30,
        topPadding: 30,
      },
      oeminfo: "",
      oemFlag: "",
    };
  },
  components: {
    Schart,
  },
  computed: {
    role() {
      return this.name === "admin" ? "超级管理员" : "普通用户";
    },
  },
  created() {
    this.nowTimes();
    this.getPermissions();
    this.handleListener();
    this.changeDate();
    // this.timeFormate();
    if (this.$route.query.initial == "1") {
      this.$confirm("为了您的账户安全，请及时修改密码", "提示", {
        confirmButtonText: "好的",
        type: "warning",
      })
        .then(() => {})
        .catch(() => {
        
        });
    } else if (this.$route.query.initial == "2") {
      this.visible = true;
    }
    this.oeminfo = JSON.parse(sessionStorage.getItem("oeminfo"));
    this.oemFlag = sessionStorage.getItem("oemFlag");
  },

  mounted() {
    this.getStatisticByRole();
    this.getLastWeekStatisticChart();
    if (
      this.rolesId == 1 ||
      this.rolesId == 2 ||
      this.rolesId == 3 ||
      this.rolesId == 4 ||
      this.rolesId == 8
    ) {
      this.getMerStatisticRank();
      this.getMerCountInfo();
    }
    if (this.rolesId == 5 || this.rolesId == 6) {
      this.getCountsByPayType();
    }
    if(this.rolesId == 6){
      this.getShopTerminals();
      this.getShopStatisticRank();
    }
    if(this.rolesId == 5){
      this.getShopStatisticRank();
    }
  },
  activated() {
    this.handleListener();
  },
  deactivated() {
    window.removeEventListener("resize", this.renderChart);
    bus.$off("collapse", this.handleBus);
  },
  methods: {
    //金额线状图
    getMoneyCharts() {
      let chartDom = document.getElementById('money');
      let myChart = echarts.init(chartDom);
      let size = () => {
        myChart.resize()
      }
      window.addEventListener('resize', size)
      let option;

      option = {
        color:'#fc6fa1',
        xAxis: {
          type: 'category',
          data: this.dateArr
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            label: {
              show: true,
              position: 'top'
            },
            data: this.moneyArr,
            type: 'line'
          },
        ],
        title: {
          text: '近七天交易总额趋势',
          left: 'center'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
      };

      option && myChart.setOption(option);
    },
    //笔数线状图
    getTotalCharts() {
      let chartDom = document.getElementById('total');
      let myChart = echarts.init(chartDom);
      let size = () => {
        myChart.resize()
      }
      window.addEventListener('resize', size)
      let option;

      option = {
        color: '#64d9b2',
        xAxis: {
          type: 'category',
          data: this.dateArr,
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            label: {
              show: true,
              position: 'top'
            },
            data: this.totalArr,
            type: 'line'
          },
        ],
        title: {
          text: '近七天交易笔数趋势',
          left: 'center'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
      };

      option && myChart.setOption(option);
    },
    //商户新增柱状图
    getMerUpCharts() {
      let chartDom = document.getElementById('merUp');
      let myChart = echarts.init(chartDom);
      let size = () => {
        myChart.resize()
      }
      window.addEventListener('resize', size)
      let option;

      option = {
        color:'#2d8cf0',
        xAxis: {
          type: 'category',
          data: this.merDateArr
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.merUpArr,
            type: 'bar'
          },
        ],
        title: {
          text: '近七天每天的新增商户量',
          left: 'center'
        },
        grid: {
          left: '0%',
          right: '0%',
          bottom: '0%',
          containLabel: true
        },
      };

      option && myChart.setOption(option);
    },
    //获取权限
    getPermissions() {
      var aaa = sessionStorage.getItem("userInfo");
      var bbb = JSON.parse(aaa);
      this.rolesId = bbb.rolesId;
     
      this.name = bbb.rolesName;
      this.username = bbb.username;
      this.nickName = bbb.nickName;
    },
    changeDate() {
    
    },
    handleListener() {
      bus.$on("collapse", this.handleBus);
      // 调用renderChart方法对图表进行重新渲染
      window.addEventListener("resize", this.renderChart);
    },
    handleBus(msg) {
      setTimeout(() => {
        this.renderChart();
      }, 300);
    },
    renderChart() {
     
    },
    //获取近七天交易数据
    async getLastWeekStatisticChart() {
      let res = await getLastWeekStatisticChart()
      if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          if(res.code == '200') {
            this.data = [];
            this.data3 = [];
            this.moneyArr = [];
            this.dateArr = [];
            this.totalArr = [];
            for (var i = 0; i < res.data.length; i++) {
              this.data.push({
                value: res.data[i].totalFee,
                name: res.data[i].tradeDate,
              });
              this.data3.push({
                value: res.data[i].total,
                name: res.data[i].tradeDate,
              });
              this.totalArr.push(res.data[i].total);
              this.moneyArr.push(res.data[i].totalFee);
              this.dateArr.push(res.data[i].tradeDate);
            }
            console.log(this.dateArr);
            this.getMoneyCharts()
            this.getTotalCharts()
          }
        }
    },
    //获取商户排行
    getMerStatisticRank() {
      getMerStatisticRank({}).then((res) => {
        console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.todoList = res.data;
        }
      });
    },
    //获取支付方式笔数
    getCountsByPayType() {
      getCountsByPayType({}).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          // console.log(res)
          if (res.data.total !== null && res.data.total !== 0) {
            let wxTotal = (res.data.wxTotal / res.data.total) * 100;
            let aliTotal = (res.data.aliTotal / res.data.total) * 100;
            let bankTotal = (res.data.bankTotal / res.data.total) * 100;
            this.wxTotal = Math.round(wxTotal * 10) / 10;
            this.aliTotal = Math.round(aliTotal * 10) / 10;
            this.bankTotal = Math.round(bankTotal * 10) / 10;
          } else if (res.data.total == null && res.data.total == 0) {
            this.wxTotal = 0;
            this.aliTotal = 0;
            this.bankTotal = 0;
          }
        }
      });
    },
    //获取新增商户量
    getMerCountInfo() {
      getMerCountInfo({}).then((res) => {
        this.total = res.data.total;
        this.activeCount = res.data.activeCount;
        console.log(res);
        this.data1 = [];
        for (var i = 0; i < res.data.newCountList.length; i++) {
          this.data1.push({
            value: res.data.newCountList[i].newCount,
            name: res.data.newCountList[i].tradeDate,
          });
          this.merUpArr.push(res.data.newCountList[i].newCount)
          this.merDateArr.push(res.data.newCountList[i].tradeDate)
          this.newtotal = res.data.newCountList[6].newCount;
        }
        this.getMerUpCharts()
      });
    },
    //获取 商户登陆 门店交易排行
    getShopStatisticRank() {
      getShopStatisticRank({}).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.todoList1 = res.data;
        }
      });
    },
    //获取 总交易金额
    getStatisticByRole() {
      getStatisticByRole({}).then((res) => {
        console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.todayBalance = res.data.balance?res.data.balance:'0.00';
          this.todayTotalFee = res.data.totalFee;
          this.todayTotal = res.data.total;
          this.todayFee = res.data.fee;
          this.todayProfit = res.data.profit;
        }
      });
    },
    //获取门店下终端
    getShopTerminals() {
      getShopTerminals({}).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          console.log(res);
          this.todoList2 = res.data;
        }
      });
    },
    timeFormate(timeStamp) {
      var that = this;
      clearInterval(that.timer);
      let year = timeStamp.getFullYear();
      let month =
        timeStamp.getMonth() + 1 < 10
          ? "0" + (timeStamp.getMonth() + 1)
          : timeStamp.getMonth() + 1;
      let date =
        timeStamp.getDate() < 10
          ? "0" + timeStamp.getDate()
          : timeStamp.getDate();
      let hh =
        timeStamp.getHours() < 10
          ? "0" + timeStamp.getHours()
          : timeStamp.getHours();
      let mm =
        timeStamp.getMinutes() < 10
          ? "0" + timeStamp.getMinutes()
          : timeStamp.getMinutes();
      let ss =
        timeStamp.getSeconds() < 10
          ? "0" + timeStamp.getSeconds()
          : timeStamp.getSeconds();
      this.nowTime =
        year + "-" + month + "-" + date + " " + hh + ":" + mm + ":" + ss;
    },
    // 定时器函数
    nowTimes() {
      var that = this;
      this.timeFormate(new Date());
      that.timer = setInterval(that.nowTimes, 1000);
    },
    task() {
      setInterval(this.updateechart, 1000 * 60);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 修改密码
    submitForm(formName) {
      if (this.ruleForm2.pass.length < 6) {
        this.$message.error("密码长度不得小于6位");
      } else {
        let userinfo = JSON.parse(sessionStorage.getItem("userInfo"));
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            modifypassword(
              {
                oldPassword: md5(this.ruleForm2.oldpass),
                newPassword: md5(this.ruleForm2.pass),
              },
              userinfo.id
            ).then((res) => {
              // console.log(res)
              if (res.code == 405) {
                sessionStorage.removeItem("token");
                this.$router.push("/login");
              } else if (res.code == 500) {
                // this.visible = false
                this.$message.error(res.message);
                this.$refs[formName].resetFields();
              } else if (res.code == 200) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                sessionStorage.removeItem("token");
                this.$router.push("/login");
                this.visible = false;
                this.$refs[formName].resetFields();
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      }
    },
  },
};
</script>

<style scoped lang="less" scoped>
/deep/.firstHeight{
 height: 80px;
}
// /deep/.margin20{
//  margin-left: 10px;
// }
.el-row {
  margin-bottom: 20px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 90px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 45px;
  width: 90px;
  height: 90px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.user-info {
  display: flex;
  align-items: center;
  /* padding-bottom: 20px; */
  /* border-bottom: 2px solid #ccc; */
  /* margin-bottom: 20px; */
}
.user-info1 {
  display: flex;
  align-items: center;
  // padding-bottom: 20px;
  // border-bottom: 2px solid #ccc;
  // margin-bottom: 20px;
}
.user-info1 > img{
  width: 70px;
}
.user-avator1 {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-avator {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 15px;
  flex: 1;
  font-size: 14px;
  color: #999;
  font-weight: 600;
}

.user-info-cont div:first-child {
  font-size: 22px;
  color: #222;
}
.link-button {
  width: 120px;
  height: 40px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  background-color: rgb(252, 104, 127);
  border-radius: 4px;
  margin-left: 10px;
}
.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
}

.mgb20 {
  margin-bottom: 20px;
  display: flex;
}

.todo-item {
  font-size: 14px;
  white-space: normal;
overflow:hidden;
}

.todo-item-del {
  text-decoration: line-through;
  white-space: normal;
  overflow:hidden;
  color: #999;
}

.schart {
  width: 100%;
  height: 300px;
}
.paimbox {
  width: 100%;
  height: 52px;
}
.paimbox .span1 {
  color: #999;
  font-size: 20px;
  font-weight: bold;
  /* float: left; */
}
.paimbox .span2 {
  color: rgb(45, 140, 240);
  font-size: 20px;
  font-weight: bold;
}
.paimbox .span3 {
  color: rgb(242, 94, 67);
  font-size: 18px;
  font-weight: bold;
}
.statistical {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  align-items: center;
  // background: #00152A;
  color: #222;
  padding: 12px;
  box-sizing: border-box;
  .statisticalitem {
    flex: 1;
    text-align: center;
    border-right: 2px solid #ccc;
    font-size: 18px;
    line-height: 180%;
    font-weight: 600;
    &:nth-last-child(1) {
      border-right: none;
    }
    .red {
      // color: #f9607d;
      font-size: 14px;
    }
  }
}
.link-bottom {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-top: 10px;
  color: #999;
}

.tip {
  font-size: 14px;
  padding: 5px;
  box-sizing: border-box;
  color: red;
}
.merCard {
  display: flex;
}
.money-charts{
  width: 100%;
  height: 20rem;
}
.table-charts {
  display: flex;
  width: 100%;
}
.table-charts .el-card {
  flex: 1;
}
.table-charts .el-card:nth-of-type(1) {
  margin-right: 20px;
}
</style>
